<template>
    <div class="main">
        <div class="par1">
            <div class="top1">
                <div class="data">
                    <span class="data-tit">
                        <img src="../../assets/img/fenxi.png" alt />
                        数据分析
                    </span>
                    <div class="ball1">
                        <div>非管理人员（实时）</div>
                        {{count_lw}}人
                    </div>
                    <div class="ball2">
                        <div>管理人员（实时）</div>
                        {{count_gl}}人
                    </div>
                </div>
                <div class="chat" id="schart1"></div>
            </div>
            <div class="top2">
                <div class="top-1">
                    <div class="biaoti">按工种分布</div>
                    <div class="under">
                        <el-form class="ena" ref="temp" :model="temp">
                            <el-form-item label>
                                <el-select
                                    v-model="temp.station_id"
                                    filterable
                                    placeholder="请选择站点"
                                    style="float:left"
                                    @change="getList($event)"
                                >
                                    <el-option
                                        v-for="item in options1"
                                        :key="item.id"
                                        :label="item.station_name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div id="schart2"></div>
                </div>
                <div class="top-1">
                    <div class="biaoti">按分包单位分布</div>
                    <div class="under">
                        <el-form class="ena" ref="temp1" :model="temp">
                            <el-form-item label>
                                <el-select
                                    v-model="temp1.station_id"
                                    filterable
                                    placeholder="请选择站点"
                                    style="float:left"
                                    @change="getList1($event)"
                                >
                                    <el-option
                                        v-for="item in options2"
                                        :key="item.id"
                                        :label="item.station_name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div id="schart3"></div>
                </div>
                <div class="top-1">
                    <div class="biaoti">按年龄分布</div>
                    <div class="under">
                        <el-form class="ena" ref="temp2" :model="temp">
                            <el-form-item label>
                                <el-select
                                    v-model="temp2.station_id"
                                    filterable
                                    placeholder="请选择站点"
                                    style="float:left"
                                    @change="getList2($event)"
                                >
                                    <el-option
                                        v-for="item in options3"
                                        :key="item.id"
                                        :label="item.station_name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div id="schart4"></div>
                </div>
            </div>
        </div>
        <div class="par2">
            <div class="fb1">
                <div class="biaoti1">按人员类型分布</div>
                <div class="under1">
                    <el-form class="ena" ref="temp5" :model="temp">
                        <el-form-item label>
                            <el-select
                                v-model="temp5.station_id"
                                filterable
                                placeholder="请选择站点"
                                style="float:left"
                                @change="getList5($event)"
                            >
                                <el-option
                                    v-for="item in options5"
                                    :key="item.id"
                                    :label="item.station_name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div id="schart5"></div>
            </div>
            <div class="fb2">
                <div class="biaoti1">按区域分布</div>
                <div class="under1">
                    <el-form class="ena" ref="temp6" :model="temp">
                        <el-form-item label>
                            <el-select
                                v-model="temp6.station_id"
                                filterable
                                placeholder="请选择站点"
                                style="float:left"
                                @change="getList6($event)"
                            >
                                <el-option
                                    v-for="item in options6"
                                    :key="item.id"
                                    :label="item.station_name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div id="schart6"></div>
            </div>

            <div class="fb4">
                <div class="biaoti1">按男女分布</div>
                <div id="schart7"></div>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '../common/bus';
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            count_lw: '',
            count_gl: '',
            data3: '',
            options1: [],
            station_id: '1',
            options2: [],
            options3: [],
            options5: [],
            options6: [],
            temp: {
                id: '',
                station_id: '',
                station_name: ''
            },
            temp1: {
                id: '',
                station_id: '',
                station_name: ''
            },
            temp2: {
                id: '',
                station_id: '',
                station_name: ''
            },
            temp5: {
                id: '',
                station_id: '',
                station_name: ''
            },
            temp6: {
                id: '',
                station_id: '',
                station_name: ''
            }
        };
    },
    methods: {
        getList6($event) {
            var me = this;
            // console.log(this.temp.station_id, 777);
            // localStorage.setItem('iiid',this.temp.station_id)
            ajax('count_PC/CountByStaffProvince', { section_id: me.section_id, station_id: me.temp6.station_id }, function(data) {
                var data1 = data.map(a => a.staff_province);
                var data2 = JSON.parse(
                    JSON.stringify(data)
                        .replace(/staff_province/g, 'name')
                        .replace(/count/g, 'value')
                );
                let myChart6 = echarts.init(document.getElementById('schart6'));
                let option6 = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data1,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            barWidth: '30%',
                            data: data2,
                            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
                        }
                    ]
                };

                myChart6.setOption(option6);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function() {
                    myChart6.resize();
                });
            });
        },
        getList5($event) {
            var me = this;
            // console.log(this.temp.station_id, 777);
            // localStorage.setItem('iiid',this.temp.station_id)
            ajax('count_PC/CountByType', { section_id: me.section_id, station_id: me.temp5.station_id }, function(data) {
                var data1 = data.map(a => a.type);
                var data2 = JSON.parse(
                    JSON.stringify(data)
                        .replace(/type/g, 'name')
                        .replace(/count/g, 'value')
                );
                let myChart5 = echarts.init(document.getElementById('schart5'));
                let option5 = {
                    // title: {
                    //     text: '天气情况统计',
                    //     subtext: '虚构数据',
                    //     left: 'center'
                    // },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#96d057', '#7ba1ce', '#e45c70', '#0da7d7', '#fcc11e'],
                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        right: 10,
                        // bottom: 'right',
                        data: data1
                    },
                    series: [
                        {
                            name: '工种人数',
                            type: 'pie',
                            radius: '50%',
                            center: ['40%', '50%'],
                            selectedMode: 'single',
                            data: data2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart5.setOption(option5);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function() {
                    myChart5.resize();
                });
            });
        },
        getList2($event) {
            var me = this;
            // console.log(this.temp.station_id, 777);
            // localStorage.setItem('iiid',this.temp.station_id)
            ajax('count_PC/CountByStaffAge', { section_id: me.section_id, station_id: me.temp2.station_id }, function(data) {
                var data1 = data.map(a => a.age_duan);
                var data2 = JSON.parse(
                    JSON.stringify(data)
                        .replace(/age_duan/g, 'name')
                        .replace(/count/g, 'value')
                );
                let myChart4 = echarts.init(document.getElementById('schart4'));
                let option4 = {
                    // title: {
                    //     text: '天气情况统计',
                    //     subtext: '虚构数据',
                    //     left: 'center'
                    // },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#96d057', '#7ba1ce', '#e45c70', '#0da7d7', '#fcc11e'],
                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        right: 10,
                        // bottom: 'right',
                        data: data1
                    },
                    series: [
                        {
                            name: '年龄段人数',
                            type: 'pie',
                            radius: '50%',
                            center: ['40%', '50%'],
                            selectedMode: 'single',
                            data: data2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart4.setOption(option4);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function() {
                    myChart4.resize();
                });
            });
        },
        getList1($event) {
            var me = this;
            // localStorage.setItem('iiid',this.temp.station_id)
            ajax('count_PC/CountBySub', { section_id: me.section_id, station_id: me.temp1.station_id }, function(data) {
                var data1 = data.map(a => a.sub_name);
                var data2 = JSON.parse(
                    JSON.stringify(data)
                        .replace(/sub_name/g, 'name')
                        .replace(/count/g, 'value')
                );
                // console.log(data2, 999999);

                let myChart3 = echarts.init(document.getElementById('schart3'));
                let option3 = {
                    // title: {
                    //     text: '天气情况统计',
                    //     subtext: '虚构数据',
                    //     left: 'center'
                    // },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#BF8EF5', '#53D4F5', '#e45c70', '#0da7d7', '#fcc11e'],

                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        right: 10,
                        // bottom: 'right',
                        data: data1
                    },
                    series: [
                        {
                            name: '分包单位人数',
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            lableLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },

                            radius: ['30%', '50%'],
                            center: ['40%', '50%'],
                            selectedMode: 'single',
                            data: data2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart3.setOption(option3);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function() {
                    myChart3.resize();
                });
            });
        },
        getList($event) {
            var me = this;
            // console.log(this.temp.station_id,777);
            // localStorage.setItem('iiid',this.temp.station_id)
            ajax('count_PC/CountByWorktype', { section_id: me.section_id, station_id: me.temp.station_id }, function(data) {
                var data1 = data.map(a => a.worktype_name);
                var data2 = JSON.parse(
                    JSON.stringify(data)
                        .replace(/worktype_name/g, 'name')
                        .replace(/count/g, 'value')
                );

                let myChart2 = echarts.init(document.getElementById('schart2'));
                let option2 = {
                    // title: {
                    //     text: '天气情况统计',
                    //     subtext: '虚构数据',
                    //     left: 'center'
                    // },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#54FAFF', '#DD5CFF', '#63FF8C', '#FF7F2E', '#BBFF4F'],
                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        right: 10,
                        // bottom: 'right',
                        data: data1
                    },
                    series: [
                        {
                            name: '工种人数',
                            type: 'pie',
                            radius: '50%',
                            center: ['40%', '50%'],
                            selectedMode: 'single',
                            data: data2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart2.setOption(option2);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function() {
                    myChart2.resize();
                });
            });
        },
        getTableData2() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp.section_id }, function(data) {
                me.options1 = data;
            });
            me.temp1.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp1.section_id }, function(data) {
                me.options2 = data;
            });
            me.temp2.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp2.section_id }, function(data) {
                me.options3 = data;
            });
            me.temp5.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp5.section_id }, function(data) {
                me.options5 = data;
            });
            me.temp6.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp6.section_id }, function(data) {
                me.options6 = data;
            });
        }
    },
    mounted() {
        var me = this;
        me.getTableData2();

        me.section_id = localStorage.getItem('section_id');
        ajax('count_PC/CountAll', { section_id: me.section_id }, function(data) {
            me.count_lw = data[0].count;
        });
        ajax('count_PC/CountAllAdmin', { section_id: me.section_id }, function(data) {
            me.count_gl = data[0].count;
        });
        ajax('count_PC/CountByStaffSex', { section_id: me.section_id, station_id: 1 }, function(data) {
            var data1 = data.map(a => a.staff_sex);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/staff_sex/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart7 = echarts.init(document.getElementById('schart7'));
            let option7 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#fcc11e', '#7ba1ce', '#e45c70', '#0da7d7', '#96d057'],
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    right: 10,
                    // bottom: 'right',
                    data: data1
                },
                series: [
                    {
                        name: '男女人数',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['40%', '50%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart7.setOption(option7);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function() {
                myChart7.resize();
            });
        });
        ajax('count_PC/CountByStaffProvince', { section_id: me.section_id, station_id: 1 }, function(data) {
            var data1 = data.map(a => a.staff_province);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/staff_province/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart6 = echarts.init(document.getElementById('schart6'));
            let option6 = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '30%',
                        data: data2,
                        itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
                    }
                ]
            };

            myChart6.setOption(option6);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function() {
                myChart6.resize();
            });
        });
        ajax('count_PC/CountByType', { section_id: me.section_id, station_id: 1 }, function(data) {
            var data1 = data.map(a => a.type);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/type/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart5 = echarts.init(document.getElementById('schart5'));
            let option5 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#96d057', '#7ba1ce', '#e45c70', '#0da7d7', '#fcc11e'],
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    right: 10,
                    // bottom: 'right',
                    data: data1
                },
                series: [
                    {
                        name: '工种人数',
                        type: 'pie',
                        radius: '50%',
                        center: ['40%', '50%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart5.setOption(option5);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function() {
                myChart5.resize();
            });
        });
        ajax('count_PC/CountByStaffAge', { section_id: me.section_id, station_id: 1 }, function(data) {
            var data1 = data.map(a => a.age_duan);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/age_duan/g, 'name')
                    .replace(/count/g, 'value')
            );

            let myChart4 = echarts.init(document.getElementById('schart4'));
            let option4 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#e45c70', '#0da7d7', '#fcc11e', '#ffd200', '#7ba1ce'],
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    right: 10,
                    // bottom: 'right',
                    data: data1
                },
                series: [
                    {
                        name: '年龄段人数',
                        type: 'pie',
                        radius: '50%',
                        center: ['40%', '50%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart4.setOption(option4);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function() {
                // myChart1.resize();
                myChart4.resize();
            });
        });
        ajax('count_PC/CountByWorktype', { section_id: me.section_id, station_id: 1 }, function(data) {
            var data1 = data.map(a => a.worktype_name);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/worktype_name/g, 'name')
                    .replace(/count/g, 'value')
            );

            let myChart2 = echarts.init(document.getElementById('schart2'));
            let option2 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                color: ['#54FAFF', '#DD5CFF', '#63FF8C', '#FF7F2E', '#BBFF4F'],
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    right: 10,
                    // bottom: 'right',
                    data: data1
                },
                series: [
                    {
                        name: '工种人数',
                        type: 'pie',
                        radius: '50%',
                        center: ['40%', '50%'],
                        selectedMode: 'single',
                        data: data2.sort(function(a, b) {
                            return a.value - b.value;
                        }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function(idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };

            myChart2.setOption(option2);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function() {
                // myChart1.resize();
                myChart2.resize();
            });
        });
        ajax('count_PC/CountBySub', { section_id: me.section_id, station_id: 1 }, function(data) {
            var data1 = data.map(a => a.sub_name);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/sub_name/g, 'name')
                    .replace(/count/g, 'value')
            );

            let myChart3 = echarts.init(document.getElementById('schart3'));
            let option3 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#BF8EF5', '#53D4F5', '#e45c70', '#0da7d7', '#fcc11e'],
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    right: 10,
                    // bottom: 'right',
                    data: data1
                },
                series: [
                    {
                        name: '工种人数',
                        type: 'pie',
                        radius: ['30%', '50%'],
                        center: ['40%', '50%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart3.setOption(option3);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function() {
                // myChart1.resize();
                myChart3.resize();
            });
        });

        let myChart1 = echarts.init(document.getElementById('schart1'));
        let option1 = {
            backgroundColor: 'rgba(240,240,240,1)',
            title: {
                text: '人员管理趋势图', //主标题
                textStyle: {
                    color: '#333333', //颜色
                    fontStyle: 'normal', //风格
                    fontWeight: '400', //粗细
                    fontFamily: 'Microsoft yahei', //字体
                    fontSize: 22, //大小
                    align: 'center' //水平对齐
                },
                // subtext:'副标题',      //副标题
                // subtextStyle:{          //对应样式
                //     color:'#F27CDE',
                //     fontSize:14
                // },
                itemGap: 7
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['迟到量', '早退量']
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                }
            ],
            yAxis: [
                {
                    name: '人员',
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '早退量',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    symbol: 'circle',

                    symbolSize: 8, //拐点圆的大小
                    color: ['#44b9f6'], //折线条的颜色
                    data: [7, 10, 8, 12, 10, 8, 12, 15, 12, 11, 8, 6],
                    areaStyle: {
                        // type: 'default',
                        // color:'#70eeff'
                        normal: {
                            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#44b9f6'
                                },
                                {
                                    offset: 0.5,
                                    color: '#73edff'
                                },
                                {
                                    offset: 1,
                                    color: '#f0f7ff'
                                }
                            ])
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 4,
                            color: '#296aff', // 会设置点和线的颜色，所以需要下面定制 line
                            borderColor: '#7be7ff' // 点边线的颜色
                        }
                    },
                    lineStyle: { color: '#65bfff' }
                },
                {
                    name: '迟到量',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8, //拐点圆的大小
                    color: ['red'], //折线条的颜色

                    data: [8, 13, 12, 13, 15, 14, 16, 16, 15, 12, 10, 8],
                    areaStyle: {
                        type: 'default',
                        color: 'rgba(240,240,240,1)'
                    },
                    lineStyle: { color: 'rgb(252, 20, 20)', type: 'dashed' },
                    itemStyle: {
                        normal: {
                            borderWidth: 4,
                            color: '#ff5b72', // 会设置点和线的颜色，所以需要下面定制 line
                            borderColor: '#ffebee' // 点边线的颜色
                        }
                    }
                }
            ]
        };
        myChart1.setOption(option1);
        window.addEventListener('resize', function() {
            myChart1.resize();
        });
    }
};
</script>


<style scoped>
.main {
    display: flex;
    justify-content: space-around;
}
#schart2,
#schart3,
#schart4 {
    width: 359px;
    height: 327px;
}
.data-tit {
    width: 88px;
    height: 21px;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin-left: 20px;
    position: relative;
}
.data-tit img {
    width: 28px;
    height: 21px;
    position: absolute;
    left: -30px;
    top: 5px;
}
.ball2 {
    margin-left: 35px;
    margin-top: 55px;
    width: 119px;
    height: 119px;
    background: rgba(60, 142, 218, 1);
    border-radius: 50%;
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 119px;
    text-align: center;
    position: relative;
}
.ball2 div {
    position: absolute;
    width: 179px;
    height: 20px;
    font-size: 19px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(51, 51, 51, 1);
    left: -12px;
    top: 80px;
}
.ball1 {
    margin-left: 35px;
    margin-top: 20px;
    width: 119px;
    height: 119px;
    background: rgba(255, 174, 47, 1);
    border-radius: 50%;
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 119px;
    text-align: center;
    position: relative;
}
.ball1 div {
    position: absolute;
    width: 179px;
    height: 20px;
    font-size: 19px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(51, 51, 51, 1);
    left: -15px;
    top: 80px;
}
.par1 {
    width: 1144px;
    height: 833px;

    display: flex;
    flex-flow: column;
    justify-content: space-around;
}
.par2 {
    width: 482px;
    height: 833px;
    /* background:rgb(105, 121, 216); */
}
.fb1 {
    float: left;
    margin-top: 9px;
    width: 482px;
    height: 279px;
}
.fb2 {
    margin-top: 9px;
    float: left;
    width: 482px;
    height: 279px;
}

.fb4 {
    margin-top: 9px;
    float: left;
    width: 482px;
    height: 221px;
}
.under1 {
    width: 359px;
    height: 38px;
    background: rgb(139, 230, 166);
}

#schart5,
#schart6 {
    /* float: left; */
    width: 482px;
    height: 198px;
    background: rgba(226, 229, 231, 0.2);
}
#schart7 {
    width: 482px;
    height: 183px;
    background: rgba(226, 229, 231, 0.2);
}

.top1 {
    width: 1144px;
    height: 422px;
    background: rgba(226, 229, 231, 0.2);
    /* opacity:0.2; */

    display: flex;

    justify-content: space-around;
}
.top2 {
    width: 1144px;
    height: 365px;
    display: flex;

    justify-content: space-around;
}
.top-1 {
    width: 359px;
    height: 365px;
    background: rgba(226, 229, 231, 0.2);
}
.biaoti {
    width: 359px;
    height: 38px;
    background: rgba(2, 180, 247, 1);
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 38px;
    text-align: center;
}
.under {
    width: 359px;
    height: 38px;
    background: rgb(139, 230, 166);
}

.el-select >>> .el-input {
    width: 359px;
}
.under1 .el-select >>> .el-input {
    width: 483px;
}
.biaoti1 {
    width: 482px;
    height: 38px;
    background: rgba(2, 180, 247, 1);
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 38px;
    text-align: center;
}
.data {
    width: 220px;
    height: 422px;
}
.chat {
    width: 900px;
    height: 422px;
}
</style>


